<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!-- 留言 -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<style>
.box {
	width: 80%;
	margin: 20px auto;
	display: flex;
}

.box .left {
	flex: 2;
	padding-right: 100px;
	overflow: hidden;
}

.box .left .messagebox {
	margin-top: 20px;
	padding: 10px;
	border-bottom: 1px solid #ddd;
}

.left_content {
	overflow: hidden;
	word-break: break-all;
}

.author, .time {
	font-size: 12px;
	color: #aaa;
}

/* 右边 */
.box .right {
	flex: 1;
}

.texta {
	padding: 10px;
	width: 100%;
	height: 160px;
	font-size: 18px;
	box-sizing: border-box;
}

.btn {
	float: right;
	width: 100px;
	height: 32px;
	background-color: burlywood;
	color: cornsilk;
	border: none;
	cursor: pointer;
}

.btn:hover {
	opacity: 0.6;
}
</style>
</head>

<body>
	<div class="box">

		<div class="left">

			<c:forEach items="${messages }" var="message">

				<div class="messagebox">
					<p class="left_content">${message.content }</p>
					<span class="author">${message.name }</span> <span class="time">${message.time }</span>
				</div>

			</c:forEach>


		</div>
		<div class="right">
			<form action="${ pageContext.request.contextPath }/index/addmessage">
				<p>
					<textarea class="texta" placeholder="请留下您宝贵的意见~" name="message"></textarea>
				</p>
				<button class="btn" type="submit">提交</button>
			</form>
		</div>
	</div>

	<script src="${ pageContext.request.contextPath }/js/jquery-1.4.2.js"></script>
	<script>
	$(function(){
		<c:if test="${!(empty errmsg)}">
			alert("${errmsg}");
		</c:if>
	});
	</script>
</body>

</html>